<template>
  <div class="stage-select-test">
    <h3>学习阶段下拉框测试</h3>
    <el-form :model="form" class="test-form">
      <el-form-item label="学习阶段">
        <el-select v-model="form.stage" placeholder="请选择学习阶段">
          <el-option label="科目一" value="1" />
          <el-option label="科目二" value="2" />
          <el-option label="科目三" value="3" />
          <el-option label="科目四" value="4" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm">重置表单</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
    <div class="current-value">
      <p>当前选中的值: {{ form.stage }}</p>
      <p>当前显示的文本: {{ getStageText(form.stage) }}</p>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

// 表单数据
const form = reactive({
  stage: '1'  // 默认选中科目一
})

// 获取学习阶段文本
const getStageText = (stage) => {
  const stageMap = {
    '1': '科目一',
    '2': '科目二',
    '3': '科目三',
    '4': '科目四'
  }
  return stageMap[stage] || '未知'
}

// 重置表单
const resetForm = () => {
  form.stage = '1'
}

// 提交表单
const submitForm = () => {
  console.log('提交的学习阶段:', form.stage)
  alert(`提交的学习阶段: ${getStageText(form.stage)} (${form.stage})`)
}
</script>

<style scoped>
.stage-select-test {
  padding: 20px;
  max-width: 500px;
  margin: 0 auto;
}

.test-form {
  margin-bottom: 20px;
}

.current-value {
  margin-top: 20px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}
</style>